<template>
  <div class="days-line">
    <template v-if="type === 'value'">
      <div v-for="i in values" class="v-item" :class="i.class" :style="`width:${i.width}px;`"></div>
    </template>
    <template v-else>
      <div class="cube" v-for="d in days" :key="d">{{ d }}</div>
    </template>
  </div>
</template>

<script>
export default {
  props: ['days', 'data'],
  data () {
    return {
      type: '',
      start: null,
      end: null,
      values: []
    }
  },
  mounted () {
    if (this.data) {
      this.type = 'value'
      const start = this.canvatDate(this.data.start)
      const end = this.canvatDate(this.data.end)
      this.values.push({ width: (start - 1) * 30 })
      this.values.push({ width: (end - start + 1) * 30, class: 'on'})
      this.values.push({ width: (this.days - 1 - end) * 30 })
    }
  },
  methods: {
    canvatDate(str){
      const [,,day] = str.split('-')
      return Number(day)
    }
  }
}
</script>

<style lang="scss" scoped>
.days-line {
  display: flex;
  .cube {
    width: 30px;
  }
  .v-item {
    height: 20px;
    &.on {
      border-left: 5px solid #315aee;
      background: rgb(49, 90, 238, 0.1);
    }
  }
}
</style>